<template>
    <el-table border
              :data="tableData" stripe :height="500"
              style="width: 100%;height: 100%"
              @selection-change="handleSelectionChange">
        <el-table-column
                label="序号"
                type="index"
                width="50"
                align="center">
            <template slot-scope="{row, $index}">
                <span>{{(curPage - 1) * 10 + $index + 1}}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="taskName" label="任务名称">
            <template slot-scope="{row, $index}">
                <span>{{row.taskName}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="任务描述">
            <template slot-scope="{row, $index}">
                <span>{{row.remark}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="userId" label="上传人">
            <template slot-scope="{row, $index}" v-if="row.users">
                <span>{{row.users.userName}}</span>
            </template>
        </el-table-column>
        <!--        <el-table-column align="left" prop="updateTime" label="数据上传时间" :min-width="180">-->
        <!--            <template slot-scope="{row, $index}">-->
        <!--                <span>{{row.updateTime}}</span>-->
        <!--            </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" prop="data" label="上传记录" :min-width="80">
            <template slot-scope="{row, $index}" v-if="row.state">
                <el-button class="el-button el-button--mini el-button--success"
                           @click="to(historyPath,row.id)">
                    查看
                </el-button>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="data" label="调查点" :min-width="100">
            <template slot-scope="{row, $index}">
                <el-button class="el-button el-button--mini el-button--success"
                           @click="to(path,row.id,'1')">查看
                </el-button>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="data" label="重要建筑物检查" :min-width="120">
            <template slot-scope="{row, $index}">
                <el-button class="el-button el-button--mini el-button--success"
                           @click="to('CorrespondBuildingQc',row.id,'1')">查看
                </el-button>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="data" label="室内设备检查" :min-width="110">
            <template slot-scope="{row, $index}">
                <el-button class="el-button el-button--mini el-button--success"
                           @click="to('CorrespondEquipmentQc',row.id,'1')">查看
                </el-button>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="data" label="通信电视塔检查" :min-width="120">
            <template slot-scope="{row, $index}">
                <el-button class="el-button el-button--mini el-button--success"
                           @click="to('CorrespondTowerQc',row.id,'1')">查看
                </el-button>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="State" label="质检结果">
            <template slot-scope="{row, $index}">
                <!--                <span>{{state[row.state - 1]}}</span>-->
                <span>质检合格</span>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
    export default {
        name: "TaskTable",
        data() {
            return {
                editTaskName: false,
                editRemark: false,
                multipleSelection: [],
                state: ["等待质检", "质检不合格", "质检合格"]
            }
        },
        props: {
            tableData: {
                type: Array,
                defult: []
            },
            path: {
                type: String,
                defult: ''
            },
            historyPath: {
                type: String,
                defult: ''
            },
            curPage: {
                type: Number,
                defult: 1
            }
        },
        methods: {
            to(path, id, di) {
                this.$router.push({name: path, params: {id: id, di: di}});
            },
            endEdit(event) {
                this.editTaskName = false;
                this.editRemark = false;
            },
            enterBlur(event) {
                event.target.blur()
            },
            changeName(index, className) {
                //设置是否可以编辑
                // tableData为表格数据
                this.editTaskName = new Array(this.tableData.length);
                this.editTaskName[index] = true;
                // this.saveItem = this.tableData[index];
                this.$set(this.editTaskName, index, true);
                //让input自动获取焦点
                this.$nextTick(function () {
                    let editInputList = document.getElementsByClassName(className);
                    editInputList[0].children[0].focus();
                });

            },
            changeRemark(index, className) {
                this.editRemark = new Array(this.tableData.length);
                this.editRemark[index] = true;
                // this.saveItem = this.tableData[index];
                this.$set(this.editRemark, index, true);
                this.$nextTick(function () {
                    let editInputList = document.getElementsByClassName(className);
                    editInputList[0].children[0].focus();
                });
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.taskTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.taskTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            resetDateFilter() {
                this.$refs.taskTable.clearFilter('data');
            },
            clearFilter() {
                this.$refs.taskTable.clearFilter();
            },
            formatter(row, column) {
                return row.address;
            },
            handleEdit(index, row) {
                //console.log(index, row);
            },
            handleDelete(index, row) {
                //console.log(index, row);
            }
        },
    }
</script>

<style scoped>

</style>
